<template>
  <!-- 底部分页插件 -->
  <transition name="el-zoom-in-bottom">
    <div class="s-c-footer">
      <transition name="el-zoom-in-center">
        <el-button :disabled="dataLoad" v-show="pageIndex > 1" @click="pageChangeHandle(false)"
                   type="primary" size="small" icon="el-icon-arrow-left" plain
                   class="pre-btn">上一页</el-button>
      </transition>

      <el-pagination
        background
        hide-on-single-page
        layout="pager"
        :current-page="pageIndex"
        :page-size="pageSize"
        :total="totalNum"
        :disabled="dataLoad"
        @current-change="currentChangeHandle"
        class="page-tool">
      </el-pagination>

      <transition name="el-zoom-in-center">
        <el-button :disabled="dataLoad" v-show="pageIndex * pageSize < totalNum" @click="pageChangeHandle(true)"
                   type="primary" size="small" plain
                   class="next-btn">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
      </transition>
    </div>
  </transition>
</template>

<script>
  /*
    博客分页组件
   */
  export default {
    name: "blog-paging",
    props: {
      // 数据是否在家
      dataLoad: {
        type: Boolean,
        default: false
      },
      // 当前展示页码
      pageIndex: {
        type: Number,
        default: 1
      },
      // 当前页显示个数
      pageSize: {
        type: Number,
        default: 8
      },
      // 当前博客数量
      totalNum: {
        type: Number,
        default: 0
      },
    },
    methods: {
      // 上下翻页操作事件
      pageChangeHandle(bool) {  // bool => false：上一页 true：下一页
        this.$emit('page-change', bool)
      },
      // 点击特定页码操作事件
      currentChangeHandle(index) {
        this.$emit('current-change', index)
      },
    },
  }
</script>

<!-- 博客分页插件样式 -->
<style scoped>
.s-c-footer {
  width: 100%;
  margin-top: 20px;
  padding: 10px 0;
  display: inline-flex;
  border-top: 3px solid #c4d7d6;
  text-align: center;
  position: relative;
}
.s-c-footer .pre-btn {
  position: absolute;
  left: 5px;
}
.s-c-footer .page-tool {
  margin:0 auto;
}
.s-c-footer .next-btn {
  position: absolute;
  right: 5px;
}
</style>
